<template>
  <el-container class="main-container">
    <!-- 左侧导航栏 -->
    <el-aside class="sidebar" width="200px">
      <el-menu class="menu" @select="handleMenuSelect">
        <!-- 我的空间 -->
        <el-menu-item index="mySpace">
          <el-icon><i class="el-icon-house"></i></el-icon>
          <span>我的空间</span>
        </el-menu-item>

        <!-- 更多空间 -->
        <el-menu-item index="moreSpace">
          <el-icon><i class="el-icon-more"></i></el-icon>
          <span>更多空间</span>
        </el-menu-item>

        <!-- 最近访问 -->
        <el-sub-menu index="recentVisits">
          <template #title>
            <!-- 使用 el-menu-item 属性 title 来规范显示文字与图标 -->
            <span style="display: flex; align-items: center;">
      <el-icon><i class="el-icon-time"></i></el-icon>
      <span style="margin-left: 0px;">最近访问</span>
    </span>
          </template>
          <el-menu-item class="dashboard-item" v-for="(visit, index) in recentVisits" :key="index" :index="`visit-${index}`">
            <img :src="visit.logo" class="dropdown-logo" /> {{ visit.name }}
          </el-menu-item>
        </el-sub-menu>

      </el-menu>
    </el-aside>

    <!-- 右侧内容区 -->
    <el-container class="content-container">
      <el-main>
        <!-- 根据选择项显示不同内容 -->
        <MySpace v-if="activeComponent === 'mySpace'" />
        <h2 v-else-if="activeComponent === 'moreSpace'">更多空间内容展示</h2>
        <h2 v-else-if="activeComponent === 'recentVisit'">最近访问内容展示</h2>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// 引入右侧“我的空间”部分组件
import MySpace from '@/views/Space/MySpaceList.vue'; // 请根据实际路径引入组件

export default {
  components: {
    MySpace,
  },
  data() {
    return {
      activeComponent: 'mySpace', // 默认显示“我的空间”组件
      recentVisits: [
        {logo: 'https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg', name: '最近访问1'},
        {logo: 'https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg', name: '最近访问2'},
      ],
    };
  },
  methods: {
    handleMenuSelect(index) {
      // 根据菜单项选择切换右侧内容组件
      if (index.startsWith('visit')) {
        this.activeComponent = 'recentVisit';
      } else {
        this.activeComponent = index;
      }
    },
  },
};
</script>

<style scoped>
.main-container {
  display: flex; /* 左右排列 */
  flex-direction: row;
  height: 100%;
  overflow: hidden; /* 防止容器本身出现滚动条 */
}

/* 左侧导航栏样式 */
.sidebar {
  background-color: #e9f7ef; /* 浅色背景区分 */
  border-right: 1px solid #ebeef5;
  height: 100%; /* 固定高度 */
  flex: 0 0 200px; /* 固定宽度 */
  position: sticky; /* 使侧边栏固定 */
  top: 0; /* 固定位置到页面顶部 */
  overflow-y: hidden; /* 允许纵向滚动，但不会影响右侧内容 */
}

/* 菜单栏样式 */
.menu {
  flex: 1; /* 占据父容器剩余空间 */
  padding: 16px;
  min-height: 0; /* 解决内容溢出问题，防止flex-item撑开父容器 */
  overflow-y: auto; /* 当内容溢出时显示滚动条 */
  background-color: transparent; /* 背景色透明，保持与父容器一致 */
}

/* 定义 dashboard-item 的样式 */
.dashboard-item {
  align-items: center; /* 垂直居中 */
  background-color: #e9f7ef; /* 设置背景色为深绿色 */
  transition: background-color 0.3s, transform 0.3s; /* 添加背景色与缩放过渡效果 */
  cursor: pointer; /* 鼠标悬停时显示为手型指针 */
}

/* 控制子元素 img 和文字之间的间距 */
.dashboard-item .dropdown-logo {
  width: 20px; /* 设置图标宽度 */
  height: 20px; /* 设置图标高度 */
  margin-right: 8px; /* 与文字间距 */
}

/* 鼠标悬停时样式 */
.dashboard-item:hover {
  background-color: #c3e3d9;
}

.dropdown-logo {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

/* 右侧内容区样式 */
.content-container {
  flex: 1; /* 占据剩余空间 */
  padding: 16px;
  overflow-y: auto; /* 右侧内容区单独控制滚动 */
  display: flex;
  flex-direction: column; /* 内部垂直排列 */
}



</style>
